import React, {Component} from "react";
import "../Footer/index.css"

export default class Footer extends Component {
    // 处理全选的回调
    handleCheckAll = (event) => {
        // console.log('event',event)
        console.log('ischecked',event.target.checked)
        this.props.checkAllTodos(event.target.checked)

    }

    // 清空所有的已完成的
    handleClearAllDone = ()=>{
        this.props.clearAllDone()
    }


    render() {

        const {todos} = this.props
        // console.log('todos',todos)
        // 总数
        const total = todos.length
        // 已完成的数量,用reduce的方法必须给初始值
        const doneCount = todos.reduce((pre,todo) => pre + (todo.done ? 1 : 0), 0)
        console.log('doneCount',doneCount)
        console.log('total',total)
        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" onChange={this.handleCheckAll} checked={doneCount === total && total !== 0 ? true : false}/>

                    {/*checked={doneCount === total && total!==0}*/}
                </label>
                <span>
                  <span>
                      已完成{doneCount}
                  </span>
                    / 全部{total}
                </span>
                <button onClick={this.handleClearAllDone} className="btn btn-danger">清除已完成任务</button>
            </div>
        )
    }
}
